<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-12 22:15:18
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 17:40:18
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\pages\components\user_chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container1" />
</template>
<script>
import { Chart } from '@antv/g2'

export default {
  mounted() {
    this.getChart2()
  },
  methods: {
    getChart2() {
      const data = [
        { type: '青少年', value: 27 },
        { type: '青年', value: 25 },
        { type: 'Other', value: 5 }
      ]

      const chart = new Chart({
        container: 'container1',
        autoFit: true,
        height: 160,
        width: 300,
        padding: [40, 0]
      })

      chart.data(data)
      chart.coordinate('polar', {
        startAngle: Math.PI, // 起始角度
        endAngle: Math.PI * (3 / 2) // 结束角度
      })

      chart.scale('value', {
        tickCount: 6
      })

      chart.axis('value', {
        grid: {
          line: {
            type: 'circle'
          },
          closed: false
        },
        verticalFactor: 1,
        label: {
          offset: 15
        }
      })

      chart.axis('type', {
        tickLine: {
          alignTick: false
        },
        grid: {
          alignTick: false
        }
      })

      chart.tooltip({
        showMarkers: false
      })
      chart.interaction('element-highlight')

      chart
        .interval()
        .position('type*value')
        .color('type', 'rgb(252,143,72)-rgb(255,215,135)')
        .label('value', {
          offset: -15,
          style: {
            textAlign: 'center',
            fill: '#000'
          }
        })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        })

      chart.render()
    }
  }
}
</script>
